<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Android可视化工具</title>

    <script>if (typeof module === 'object') {
        window.module = module;
        module = undefined;
    }</script>
    <script src="jquery-2.2.0.min.js"></script>
    <script>if (window.module) module = window.module;</script>
    <style>
        .left_menu {
            width: 20%;
            float: left;
        }

        .right_content {
            width: 80%;
            float: left;
        }

        .left_item {
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #222222;
            border-bottom: 1px solid #e8e8e8;
            cursor: pointer;
        }

        .right_iframe {
            width: 100%;
            height: 660px;
            border-left: 1px solid #e8e8e8;
        }
    </style>
</head>
<body>
<!--左边按钮-->
<div class="left_menu">

</div>
<!--右边展示页面-->
<div class="right_content">
    <iframe frameborder="no" border="0"
            src="config/config.html"
            class="right_iframe"></iframe>
</div>
</body>
<script>
    //定义按钮数组
    const mItems = ["基础配置", "Shape生成", "对象生成", "多渠道打包"];
    eachLeftNode();

    function eachLeftNode() {
        mItems.forEach(function (item) {
            let div = "<div class='left_item'>" + item + "</div>";
            $(".left_menu").append(div);
        });

        //遍历左侧的按钮，并追加点击事件
        $('.left_item').each(function (position) {
            $(this).on('click', function () {
                $(this).css("color", "#d43c3c");
                $(this).siblings().css("color", "#222222");
                selectItem(position);
            })
        });

        //默认选中第一个
        $(".left_item").eq(0).css("color", "#d43c3c");
    }

    //左侧条目点击,进行切换不同的功能页面
    function selectItem(position) {
        var srcPath = "config/config.html";//默认基础配置页面
        switch (position) {
            case 1://Shape生成
                srcPath = "shape/shape.html";
                break;
            case 2://对象生成
                srcPath = "data/data.html";
                break;
            case 3://多渠道打包
                srcPath = "python/python.html";
                break;

        }
        $(".right_iframe").attr("src", srcPath);
    }
</script>
</html>